<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.container{
			position: absolute;
			width: 100%;
			height: 3000px;
		}
		img{
			position: absolute;
		}
		#relan{
			left: 550px;
			transform: rotate(180deg);
		}
	</style>
<body>

<section class="container">
	<img id="lan" src="images/10.jpg">
	<img id="relan" src="images/10.jpg">
</section>

<script>

	var lan = document.getElementById('lan'),
		relan = document.getElementById('relan');
	var old_top1 = -1000,
		old_top2 = 1000;

	addEvent(window,'scroll',onScroll);
	onScroll();

	function onScroll(e){
		var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
		lan.style.top = old_top1+scrollTop*2+'px';
		relan.style.top = old_top2-scrollTop*0+'px';
	}
	onScroll();

	function addEvent(eventTarget, eventType, eventHandler) {
	    if (eventTarget.addEventListener) {
	        eventTarget.addEventListener(eventType, eventHandler, false);
	    } else {
	        if (eventTarget.attachEvent) {
	            eventType = "on" + eventType;
	            eventTarget.attachEvent(eventType, eventHandler);
	        } else {
	            eventTarget["on" + eventType] = eventHandler;
	        }
	    }
    }

</script>
</body>
</html>